import React, { Component } from 'react'
import './Personalcenter.scss'

class Personalcenter extends Component {
	constructor(props) {
		super(props);
		this.state = {
		}
	}
	render() {
		return (
			<div className='top'>
				<div className='avatorbox'>
					<img className='avator' src='' alt='' />
				</div>
				<div className='rightbox'>
					<div style={{ fontSize: 17, color: '#fff', textAlign: 'left', display: 'flex' }}>
						LeiWH-AZA
						<div className='v-box'>
							<img src={require('../../images/v1.png')} className='imgv' alt="" />
							<span className='number'><sub>1</sub></span>
						</div>

					</div>
					<div style={{ display: 'flex' }}>
						<div style={{ width: '60%', display: 'flex', alignItems: 'center' }}>
							<div className='vv-box'>
								<img src={require('../../images/vbg.png')} className='imgvv' alt="" />
								<img src={require('../../images/vv.png')} className='img' alt="" />
								<span className='number'><sub>1</sub></span>
							</div>
							<div style={{ flex: 1, height: 4, backgroundColor: '#364d79', marginLeft: -3 }}>
								<div style={{ width: '30%', height: '100%', backgroundColor: '#e2be84' }}></div>
							</div>
							<div className='vv-box' style={{ marginLeft: -3 }}>
								<img src={require('../../images/vbg1.png')} className='imgvv' alt="" />
								<img src={require('../../images/vv.png')} className='img' alt="" />
								<span className='number'><sub>2</sub></span>
							</div>
						</div>
						<div style={{ width: '40%', fontSize: 12, color: '#fff', lineHeight: '17px' }}>成长值28/100</div>
					</div>
				</div>
				<img
					className='setting'
					src={require('../../images/setting.png')} alt="" />
			</div>
		)
	}
}
export default Personalcenter;
